<template>
  <div class="content">
    <div class="scroll-view-box" v-loading="submitBtn">
      <el-form label-width="120px" :inline="true" :model="addForm" :rules="addRules" ref="addRules"
        label-position="top">
        <el-form-item label="供应商" prop="supplier_id">
          <el-select filterable v-model="addForm.supplier_id" placeholder="选择供应商" clearable class="input-width">
            <el-option v-for="item in supplierOptions" :key="item.Id" :label="item.supplier_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同状态" prop="contract_status">
          <el-select filterable v-model="addForm.contract_status" placeholder="请选择合同状态" clearable class="input-width">
            <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约日期" prop="signing_date">
          <el-date-picker value-format="yyyy-MM-dd" class="input-width" v-model="addForm.signing_date" type="date"
            placeholder="选择签约日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="生效日期" prop="effective_date">
          <el-date-picker value-format="yyyy-MM-dd" class="input-width" v-model="addForm.effective_date" type="date"
            placeholder="选择生效日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="expiring_date">
          <el-date-picker value-format="yyyy-MM-dd" class="input-width" v-model="addForm.expiring_date" type="date"
            placeholder="选择失效日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购合同名称" prop="contract_name">
          <el-input v-model="addForm.contract_name" placeholder="输入采购合同名称" clearable class="input-width">
          </el-input>
        </el-form-item>
        <el-form-item label="合同附件" prop="file_list">
          <div class="file-list-box">
            <!--  accept=".pdf,.zip" -->
            <el-upload accept=".pdf,.zip" multiple class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" list-type="picture-card" :on-change="changeFile">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="file-item-box" v-for="(item, index) in addForm.file_list" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name || item.file_name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit('addRules')" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import purchaseApi from "@/api/purchaseApi";
export default {
  name: 'addPurchaseContractPage',
  data() {
    var validateFileList = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择合同附件'));
      } else {
        callback();
      }
    };
    return {
      addForm: {
        supplier_id: "",
        contract_status: "",
        signing_date: "",
        effective_date: "",
        expiring_date: "",
        contract_name: "",
        file_list: [],
      },
      addRules: {
        supplier_id: [
          {
            required: true,
            message: "请选择供应商",
            trigger: "change",
          },
        ],
        contract_status: [
          {
            required: true,
            message: "请选择合同状态",
            trigger: "change",
          },
        ],
        signing_date: [
          {
            required: true,
            message: "请选择签约日期",
            trigger: "change",
          },
        ],
        effective_date: [
          {
            required: true,
            message: "请选择生效日期",
            trigger: "change",
          },
        ],
        expiring_date: [
          {
            required: true,
            message: "请选择失效日期",
            trigger: "change",
          },
        ],
        contract_name: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: "change",
          },
        ],
        file_list: [
          {
            required: true,
            validator: validateFileList,
            trigger: "change",
          },
        ],
      },
      submitBtn: false,
      objectList: [],
      typeList: [{
        id: 1,
        label: '待生效'
      }, {
        id: 2,
        label: '已生效'
      }, {
        id: 3,
        label: '已失效'
      }],
      supplierOptions: [],//供应商列表
    };
  },
  computed: {
    hisList() {
      return this.$store.getters.routerHis;
    },
    path() {
      return this.$route.path;
    },
  },
  mounted() {
    this.getSupplier();//供应商列表
    this.getContractInfo();//合同详情
  },
  methods: {
    // -----------------------合同详情--------------------------
    getContractInfo() {
      if (!this.$route.query.id) return;
      purchaseApi.getContractInfo({
        contract_id: this.$route.query.id
      }).then(res => {
        console.log(res, "合同详情")
        if (res.code == 200) {
          this.addForm = res.data;
        }
      })
    },
    // -----------------------供应商列表--------------------------
    getSupplier() {
      purchaseApi.getSupplier({
        page: 1,
        num: 999,
        interact_status: 1
      }).then(res => {
        console.log(res, "供应商列表")
        if (res.code == 200) {
          this.supplierOptions = res.data.list;
        }
      })
    },
    // -----------------------文件选择--------------------------
    changeFile(file) {
      console.log(file);
      this.addForm.file_list.push(file);
    },
    // -----------------------文件删除--------------------------
    delFileFunc(index) {
      // 删除已存在合同的线上文件
      this.addForm.delete_files = [];
      if (!this.addForm.file_list[index].raw) {
        this.addForm.delete_files.push(this.addForm.file_list[index].Id)
      }
      // 删除合同本地文件
      this.addForm.file_list.splice(index, 1);
    },
    // -----------------------操作用户弹窗 - 提交--------------------------
    saveSubmit(formName) {
      let addForm = this.addForm;
      console.log(addForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          let obj = {
            supplier_id: addForm.supplier_id,
            contract_status: addForm.contract_status,
            signing_date: addForm.signing_date,
            effective_date: addForm.effective_date,
            expiring_date: addForm.expiring_date,
            contract_name: addForm.contract_name,
          }
          for (let i = 0; i < addForm.file_list.length; i++) {
            if (addForm.file_list[i].raw) {
              formdata.append('file_list[]', addForm.file_list[i].raw);
            }
          }
          // 修改合同
          if (addForm.Id) {
            obj.delete_files = addForm.delete_files ? addForm.delete_files : [];
            obj.contract_id = addForm.Id;
            formdata.append('data', JSON.stringify(obj))
            this.updateContract(formdata);
            return;
          }
          // 新增合同
          formdata.append('data', JSON.stringify(obj))
          this.addContract(formdata);
        } else {
          return false;
        }
      });
    },
    // -----------------------添加合同请求--------------------------
    addContract(obj) {
      this.submitBtn = true;
      purchaseApi.addContract(obj).then(res => {
        console.log(res, "添加合同")
        this.submitBtn = false;
        if (res.code == 200) {
          this.cancelFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -----------------------更新合同请求--------------------------
    updateContract(obj) {
      this.submitBtn = true;
      purchaseApi.updateContract(obj).then(res => {
        console.log(res, "更新合同")
        this.submitBtn = false;
        if (res.code == 200) {
          this.cancelFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -----------------------取消--------------------------
    cancelFunc() {
      this.$goBackTab(this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/addPage.scss";
</style>